<template>
  <div class="wrap">
    <div class="banner">
      <img class="icon" src="@/assets/more.png" @click="showLeft"/>
      <div class="title">影犬</div>
      <i class="el-icon-search search-icon" @click="showSearch"></i>
    </div>

    <van-popup v-model="searchShow" position="top" round :style="{height:'auto'}">

      <div style="padding:20px;margin: 50px 0;">
        <!--        <van-search v-model="keyword" placeholder="请输入影片名" show-action>-->
        <!--          <template #action>-->
        <!--            <div @click="onSearch">搜索</div>-->
        <!--          </template>-->
        <!--        </van-search>-->
        <div style="display: flex;justify-content: center">
          <img style="width:50px;height:50px;margin-bottom: 20px" src="@/assets/fang_dog.png"/>
        </div>
        <el-input placeholder="请输入影片名" v-model="keyword" clearable>
          <el-button @click="onSearch" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </van-popup>

    <!--    <van-popup v-model="show" position="left" :style="{ width: '50%' }" />-->
    <van-popup v-model="show" position="left" :style="{ width: '50%',height:'100%'}">
      <div class="popup-wrap">
        <div class="btn-wrap">
          <van-button type="default" v-if="!avatar" @click="showForm" class="login-btn">登陆</van-button>
          <img class="avatar" v-else src="@/assets/dog.png"/>
        </div>
        <div class="items">
          <div class="item-wrap">
            <div class="item" @click="toHome">首页</div>
          </div>
          <div class="item-wrap">
            <div class="item" @click="toTheme">推荐</div>
          </div>
          <div class="item-wrap">
            <div class="item" @click="toCollection">我的收藏</div>
          </div>
          <div class="item-wrap">
            <div class="item" @click="toShare">分享资源</div>
          </div>
          <div class="item-wrap">
            <div class="item" @click="toDemand">求资源</div>
          </div>
        </div>
        <div v-if="avatar" style="display: flex;justify-content: center;margin-top: 50px">
          <van-button @click="logout" style="width:150px">退出登录</van-button>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="formShow"
               @close="closeLogin"
               closeable
               close-icon-position="top-left"
               position="bottom"
               :style="{ height:'100%'}">
      <div class="login-wrap">
        <div class="logo-wrap">
          <img class="login-logo" src="@/assets/dog.png"/>
        </div>
        <van-form>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
          />
          <van-field
            v-if="registerShow"
            v-model="confirmPassword"
            type="password"
            name="重复密码"
            label="重复密码"
            placeholder="重复密码"
          />
          <div style="margin: 16px;display: flex">
            <van-button :loading="loginLoading" block v-if="loginShow" type="default" @click="login">
              登陆
            </van-button>
            <van-button v-if="loginShow" style="margin-left: 20px" native-type="button" block @click="toRegister">
              去注册
            </van-button>
            <van-button :loading="registerLoading" v-if="registerShow" block @click="register">
              注册
            </van-button>
            <van-button v-if="registerShow" style="margin-left: 20px" block @click="toLogin">
              去登陆
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {login} from '@/api/user'
  import {getStore, removeStore} from "@/utils/storage";
  import md5 from 'js-md5';
  import Bus from '@/utils/bus';


  export default {
    name: 'RHeader',
    data() {
      return {
        searchShow: false,
        show: false,
        formShow: false,
        loginShow: false,
        registerShow: false,
        username: '',
        password: '',
        confirmPassword: '',
        keyword: '',
        loginLoading: false,
        registerLoading: false
      }
    },
    computed: {
      avatar() {
        return getStore('avatar')
      },
    },
    mounted() {
      Bus.$on('showLogin', () => {
        this.showForm();
      });
    },
    methods: {
      logout() {
        this.$store.dispatch('clearInfo').then(() => {
          this.$toast.success('登出成功');
          this.formShow = false;
          location.reload()
        })
      },
      onSearch() {
        this.searchShow = false;
        let title = this.keyword;
        this.$router.push({
          path: '/search',
          query: {
            title: title
          }
        })
        // this.keyword = '';

      },
      showSearch() {
        this.searchShow = true;
      },
      resetPage() {
        removeStore("params");
      },
      toHome() {
        this.resetPage();
        this.show = false;
        this.$router.push({path: '/home'})
      },
      toTheme() {
        this.resetPage();
        this.show = false;
        this.$router.push({path: '/theme'})
      },
      toCollection() {
        //先要登陆
        if(!this.avatar){
          this.showForm();
          return;
        }
        this.resetPage();
        this.show = false;
        this.$router.push({path: '/collection'})
      },
      toShare() {
        this.resetPage();
        this.show = false;
        this.$router.push({path: '/share'})
      },
      toDemand() {
        this.resetPage();
        this.show = false;
        this.$router.push({path: '/demand'})
      },
      showLeft() {
        this.show = true
      },
      showForm() {
        this.formShow = true;
        this.loginShow = true;
      },
      toRegister() {
        this.registerShow = true;
        this.loginShow = false;
      },
      toLogin() {
        this.registerShow = false;
        this.loginShow = true;
      },
      closeLogin() {
        this.loginShow = true;
        this.registerShow = false;
      },
      register() {
        if (this.username === '' || this.password === '' || this.confirmPassword === '') {
          this.$toast("请正确输入");
          return;
        }
        let params = {
          'username': this.username,
          'password': md5(this.password),
          'confirmPassword': md5(this.confirmPassword),
          'nickname': this.username
        }
        this.registerLoading = true;
        //要异步改变store里的值就必须这样
        this.$store.dispatch('register', params).then(() => {
          this.$toast("注册成功");
          this.registerLoading = false
          this.loginShow = false;
          this.registerShow = false;
          this.formShow = false;
          location.reload()
        }).catch(err => {
          this.registerLoading = false
        })
      },
      login() {
        if (this.username === '' || this.password === '') {
          // this.$message.error("请正确输入");
          this.$toast("请正确输入");
          return;
        }
        let params = {
          'username': this.username,
          'password': md5(this.password)
        }
        //要异步改变store里的值就必须这样
        this.loginLoading = true;
        this.$store.dispatch('login', params).then(() => {
          this.loginLoading = false;
          location.reload()
          this.loginShow = false;
          this.registerShow = false;
          this.formShow = false;
          this.$toast.success('登陆成功');
        }).catch(err => {
          this.loginLoading = false;
          this.$toast("登陆失败")
        })
      }
    }

  }
</script>

<style scoped>
  .wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }

  .banner {
    /*display: flex;*/
    /*justify-content: space-between;*/
    text-align: center;
  }

  .icon {
    width: 20px;
    height: 18px;
    position: absolute;
    left: 20px;
    top: 15px;
  }

  .search-icon {
    width: 20px;
    height: 18px;
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 20px;
  }

  .title {
    line-height: 50px;
    /*display: flex;*/
    /*justify-content: center;*/
  }

  .wrap {
    background-color: white;
    /*justify-content: center;*/
    /*display: flex;*/
    height: 50px;
    box-shadow: 2px 2px 2px #dedede;
  }

  .popup-wrap {
    padding-top: 80px;
  }

  .items {
    margin-top: 30px;
  }

  .item-wrap {
    border-bottom: 1px dotted #bfbfbf;
    /*margin: 10px 30px;*/
  }

  .btn-wrap {
    display: flex;
    justify-content: center;
  }

  .login-btn {
    margin: 0 auto;
  }

  .item {
    margin: 10px 30px;
    padding:10px 0;
  }

  .login-wrap {
    padding: 50px;
  }

  .logo-wrap {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 30px;
  }

  .login-logo {
    width: 50px;
    height: 50px;
  }

  .avatar {
    width: 50px;
    height: 50px;
  }
</style>
